<template>
    <div class="h100 ">
      <app-head :title="title"></app-head>
      <div style="background:#fff;">
        <div class="head flex_b">
          <div class="head_img ">
            <img :src='datas.headImg' alt="">
          </div>
          <div style="margin-top: 10px;margin-left: 16px;">
            <h3 style="font-size: 20px;color: #444444;height: 28px;text-align: left">{{datas.name}}</h3>
            <p class="p_c">经验值：{{datas.exVlue}}</p>

            <p class='p_c'>通过问答比拼获得经验值：{{datas.exVlueAll}}</p>
          </div>
        </div>
        <div style="height: 10px;background:#f4f4f4;"></div>
       <div class="que_c">
         <div v-for="(item,index) in result">
           <dl>

             <dt class="date">{{item.datetime}}<span class="statu">+{{item.exVlue}}</span></dt>
             <dt class="tit">对{{item.exVlue}}题，错{{item.falseNum}}题，用时{{item.time}}秒</dt>
           </dl>
           <div class="line" v-if="index!=5"></div>
         </div>
       </div>
      </div>

    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
        name: "QuestionStep4",
      components:{
        AppHead
      },

        data () {
          return {
            title: '问答比拼',
            datas:{},
            result:[]
          }
        }
        ,mounted:function () {
          this.init()
      },
      methods:{
        init:function () {
          var that = this
          this.$http({
            method: 'get',
            url: '/user/getuser',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {


            that.datas = res.data.datas[0]
            console.log(that.datas )
          }).catch(function (error) {

          })

          this.$http({
            method: 'get',
            url: '/question/questionResultHis',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {


            that.result = res.data.datas
            console.log(that.result)
          }).catch(function (error) {

          })

        },
      }
    }
</script>

<style scoped lang="less">

  .h100{
    background: #f5f5f5;
    height: 100vh;
  }
  .p_c{
    color: #777;font-size: 13px;text-align: left;opacity: .8;
    margin-top: 2px;
  }
  .head{

    border-radius:0px 100px 100px 0px;
    height: 88px;
    margin-top: 5px;

    /*align-items: center;*/

    .head_img{
      width: 68px;
      height: 68px;
      border-radius: 50%;
      overflow: hidden;
      margin-top: 10px;
      margin-left: 24px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .que_c{
    padding: 16px 24px;
    .tit{
      font-size:15px;
      color: #333333;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 80%;


    }
    .line{
      height:1px;width: 95%;
      background:rgba(238,238,238,1);
    }
    .date{
      color: #999999;
      font-size: 12px;
      text-align: left;
      margin: 4px 0;
      .statu{
        width:42px;
        height:20px;
        color: #4A90E2;
        font-size: 18px;
        padding: 2px 0;
        border-radius:11px;
        position: absolute;
        right: 16px;text-align: center;
      }
    }
    .dec{
      font-size: 13px;
      color: #777777;
      overflow: hidden;
      text-overflow: ellipsis;
      display: box;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      height: initial;
      -webkit-box-orient: vertical;
      white-space: initial;text-align: left;
    }
  }


</style>
